<template>
  <div class="container" style="padding: 0px">
    <el-card class="box-card" style="height: inherit;padding-bottom: 20px">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">已发任务</span>
        <el-button style="float: right;" size="small" type="danger" @click="goBack">关闭</el-button>
      </div>
      <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!--表单信息-->
        <el-tab-pane label="表单信息" name="1">
          <el-col :span="16" :offset="4">
            <div class="test-form">
              <v-form-render :key="new Date().getTime()" ref="vFormRef" :form-json="variablesData" :form-data="formData"
                             :option-data="optionData">
              </v-form-render>
            </div>
          </el-col>
        </el-tab-pane>
        <!--流程流转记录-->
        <el-tab-pane label="流转记录" name="2">
          <el-col :span="16" :offset="4">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                    v-for="(item,index ) in flowRecordList"
                    :key="index"
                    :icon="setIcon(item.finishTime)"
                    :color="setColor(item.finishTime)"
                >
                  <p style="font-weight: 700">{{ item.taskName }}</p>
                  <el-card :body-style="{ padding: '10px' }">
                    <el-descriptions class="margin-top" :column="1" size="small" border>
                      <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                        <template #label>
                          <div class="cell-item">
                            <el-icon>
                              <UserFilled></UserFilled>
                            </el-icon>
                            办理人
                          </div>
                        </template>
                        {{ item.assigneeName }}
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                        <template #label>
                          <div class="cell-item">
                            <el-icon>
                              <UserFilled></UserFilled>
                            </el-icon>
                            候选办理
                          </div>
                        </template>
                        {{ item.candidate }}
                      </el-descriptions-item>
                      <el-descriptions-item label-class-name="my-label">
                        <template #label>
                          <div class="cell-item">
                            <el-icon>
                              <Stopwatch/>
                            </el-icon>
                            接收时间
                          </div>
                        </template>
                        {{ item.createTime }}
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                        <template #label>
                          <div class="cell-item">
                            <el-icon>
                              <Stopwatch/>
                            </el-icon>
                            处理时间
                          </div>
                        </template>
                        {{ item.finishTime }}
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                        <template #label>
                          <div class="cell-item">
                            <el-icon>
                              <Timer/>
                            </el-icon>
                            耗时
                          </div>
                        </template>
                        {{ item.duration }}
                      </el-descriptions-item>
                      <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                        <template #label>
                          <div class="cell-item">
                            <el-icon>
                              <Tickets/>
                            </el-icon>
                            >处理意见
                          </div>
                        </template>
                        {{ item.comment.comment }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-tab-pane>
        <!--流程图-->
        <el-tab-pane label="流程图" name="3">
          <flow :flowData="flowData"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import flow from '@/views/admin/task/processdeatil/flow.vue'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {fetchData} from "@/api/index";
import {onMounted, reactive, ref,watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

let route: any = useRoute()
let router = useRouter()
let store = useStore()
let flowData = ref({})
let activeName = ref("1")
let queryParams = ref({
  deptId: undefined
})
let formData = ref({})
let optionData = reactive({})
let loading = ref(false)
let flowRecordList = ref([])
let taskForm = reactive({
  multiple: false,
  comment: "", // 意见内容
  procInsId: "", // 流程实例编号
  instanceId: "", // 流程实例编号
  deployId: "",  // 流程定义编号
  taskId: "",// 流程任务编号
  procDefId: "",  // 流程编号
})
let variablesData = ref({})
let taskList = ref([])
onMounted(() => {
  load()
})
const load = () => {
  taskForm.deployId = route.query && route.query.deployId;
  taskForm.taskId = route.query && route.query.taskId;
  taskForm.procInsId = route.query && route.query.procInsId;
  // 回显流程记录
  // 流程任务重获取变量表单
  processVariables(taskForm.taskId)
  getFlowRecordList(taskForm.procInsId, taskForm.deployId);
}
const processVariables = (taskId: any) => {
  if (taskId) {
    // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
    fetchData(`/process/flowable/task/processVariables/${taskId}`).then((res: any) => {
      variablesData.value = res.formJson;
      formData.value=res
    });
  }
}
const getFlowRecordList = (procInsId: any, deployId: any) => {
  const params = {procInsId: procInsId, deployId: deployId}
  fetchData("/process/flowable/task/flowRecord", params).then((res: any) => {
    flowRecordList.value = res.flowList;
  }).catch(res => {
    goBack();
  })
}
const goBack = () => {
  store.dispatch('tagsView/delRouterView', {
    "path":"/admin/task/process",
  })
  router.push("/admin/task/process")
}


const handleClick = (tab: any, event: any) => {
  if (tab.paneName === '3') {
    fetchData("/process/flowable/task/flowXmlAndNode", {
      procInsId: taskForm.procInsId,
      deployId: taskForm.deployId
    }).then(res => {
      flowData.value = res;
    })
  }
}
const getFlowViewer = (procInsId: any, executionId: any) => {
  fetchData(`/process/flowable/task/flowViewer/${procInsId}/${executionId}`).then((res: any) => {
    taskList.value = res
  })
}
const setIcon = (val: any) => {
  if (val) {
    return "el-icon-check";
  } else {
    return "el-icon-time";
  }
}
const setColor = (val) => {
  if (val) {
    return "#2bc418";
  } else {
    return "#b3bdbb";
  }
}
const fillFormData = (form, data) => {
  form.fields.forEach((item) => {
    const vModel = item.__vModel__;
    const val = data[item.__vModel__];

    // 特殊处理el-upload，回显图片
    if (item.__config__.tag === "el-upload") {
      // 回显图片
      item["file-list"] = (val || []).map((url) => ({
        name: `${vModel}${i}`,
        url,
      }));
    }
    if (val) {
      item.__config__.defaultValue = val;
    }
  });
}

</script>
<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  //margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #E1F3D8;
}

.cell-item {
  display: flex;
  align-items: center;
}
</style>
